<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sublive.css" />
		<style type="text/css">
			[v-cloak] {
				display: none!important;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-card" id="refreshContainer">
				<ul id="mui-online-list" v-cloak>
					<li v-if="listOnlineObj.total ==0 " class="mui-table-view-cell mui-media">
						<p class='mui-ellipsis'>暂无直播数据</p>
					</li>
					<li v-else v-for="(item,index) in items" class="mui-table-view-cell mui-media">
						<!--离线-->
						<a href="javascript:;" v-if="item.schedules.length==0" data-status="4">
							<div class="mui-media-body mui-pull-left mui-pull-top mui-col-xs-3">
								<div class="liveNo">
									{{item.room.name}}
								</div>
								<p class='mui-ellipsis'>离线</p>
							</div>
							<div class="mui-table-view-cell mui-media mui-pull-right mui-col-xs-8" id="unlineMeeting">
								<div class="notes">
									<p>暂无预约会议</p>
								</div>
								·</div>
						</a>
						<!--直播-->
						<a href="javascript:;" v-else-if="item.schedules[0].status == 3"  :data-channel="item.room.channel" :data-open="item.schedules[0].isOpen" :data-password="item.schedules[0].password" :data-meetingId="item.schedules[0].id" :data-status="item.schedules[0].status">
							<div class="mui-media-body mui-pull-left mui-pull-top mui-col-xs-3">
								<div class="liveNo living">
									{{item.room.name}}
								</div>
								<p class='mui-ellipsis'>{{item.schedules[0].personCount}}人</p>
							</div>
							<img class="mui-media-object mui-pull-right mui-col-xs-8" style="max-width: inherit;height: 100%;" v-bind:src="item.room.snapAccessUrl" onerror="this.src='images/32noimg.png'">
						</a>
						<!--预约-->
						<a href="javascript:;" v-else-if="item.schedules[0].status == 2" :data-channel="item.room.channel" :data-open="item.schedules[0].isOpen" :data-password="item.schedules[0].password" :data-meetingId="item.schedules[0].id" :data-status="item.schedules[0].status">
							<div class="mui-media-body mui-pull-left mui-pull-top mui-col-xs-3">
								<div class="liveNo booking">
									{{item.room.name}}
								</div>
								<p class='mui-ellipsis'>预约中</p>
							</div>
							<div class="mui-table-view-cell mui-media mui-pull-right mui-col-xs-8" id="booking">
								<div class="notes">
									<p>会议主题：{{item.schedules[0].subject}}</p>
									<p>开会时间：{{item.schedules[0].beginTime}}</p>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript">
	mui.init({
		pullRefresh: {
			container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down: {
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				height: '50px', //可选,默认50px.下拉刷新控件的高度,
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
				auto: false, //可选,默认false.首次加载自动上拉刷新一次
				callback: pullrefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		}
	});

	var userinfo = server.user.getLoginUser();
	
	window.addEventListener("myfresh", function(e) {
		location.reload();
	});

	mui.plusReady(function() {
		
		//	初始化点击事件（会议列表）
		mui('body').on('tap', '#mui-online-list li a', function() {
			var meetingid = this.getAttribute("data-meetingId");
			var channel = this.getAttribute("data-channel");
			var status = this.getAttribute("data-status");
			var open = this.getAttribute("data-open");
			var password = this.getAttribute("data-password");
			var userid = userinfo.id;
			if(status != '1' && status != '4') {
				//判断是否公开
				if(!open) {
					mui.prompt('请输入会议室密码', '', '友情提示', function(e) {
						if(e.index == 1) {
							if(password != e.value) {
								mui.toast('会议室密码错误', {
									icon: 2
								});
								return;
							}
							onPenView(meetingid, userid,channel);
						}
					}, 'div');
				} else {
					onPenView(meetingid, userid,channel);
				}

			}

		});
	});
	//	预约和直播会议数据对象
	var listOnlineObj = {};
	initMeetingData();
	var first = false;
	var listOnline;

	//	预约和直播会议数据
	function initMeetingData() {
		server.meeting.getRoomSchedules('', function(r) {
			listOnlineObj = {
				total: r.length,
				items: r
			};
			if(!first) {
				getDom();
				first = true;
			} else {
				setTimeout(function() {
					listOnline.items = r;
				}, 500)
			}

		}, function() {
			mui.toast('服务器错误,请稍后刷新重试');
		})

	};

	// 渲染预约和直播会议数据DOM	
	function getDom() {
		listOnline = new Vue({
			el: "#mui-online-list",
			data: listOnlineObj
		});
	}

	//	查看会议详情功能
	function onPenView(mid, uid,channel) {
		mui.openWindow({
			url: 'detail.html',
			id: 'detail',
			extras: {
				"meetingid": mid, //自定义扩展参数，可以用来处理页面间传值
				"userid": uid,
				"channel": channel
			},
			createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			show: {
				autoShow: true, //页面loaded事件发生后自动显示，默认为true
				aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
				duration: 300 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			},
			waiting: {
				autoShow: true, //自动显示等待框，默认为true
				title: '正在加载...' //等待对话框上显示的提示内容
			}
		})
	};

	//	下拉刷新功能
	function pullrefresh() {
		initMeetingData();
		setTimeout(function() {
			mui('#refreshContainer').pullRefresh().endPulldown();
		}, 1000);
	}
</script>